@url: "./images/";

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  font-size: 0.14rem;
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: url('@{url}bg.png') no-repeat;
  background-size: 100% auto;

  header {
    width: 100%;
    height: 3.31rem;
    background: url('@{url}header.png');
    background-size: 100% auto;
  }

  nav {
    p {
      font-weight: 700;
      text-shadow: 1px 1px 1px #e73d90;
      text-align: center;
      color: #fff;
    }

    p:first-child {
      font-size: 0.4rem;
      margin-bottom: 0.18rem;
    }

    p:last-child {
      font-size: 0.36rem;
      margin-bottom: 0.28rem;
    }
  }

  article {
    p:first-child {
      position: relative;
      width: 100%;
      height: 0.88rem;
      text-align: center;
      color: #fff;
      margin-bottom: 0.53rem;

      span {
        display: inline-block;
        width: 0.57rem;
        height: 0.77rem;
        background: url('@{url}sprite.png') no-repeat;
        background-size: 6.4rem 11.36rem;
      }

      .num-0 {
        background-position: -.15rem -2.9rem;
      }
    }

    P:nth-child(2) {
      height: 1rem;
      font-size: 0.45rem;
      font-weight: 700;
      background: url('@{url}sprite.png') no-repeat 0 -1.53rem;
      background-size: 100%;
      text-align: center;
      line-height: 1rem;
      a {
        text-decoration: none;
        color: #303d57;
      }
    }

    P:last-child {
      height: 1rem;
      font-size: 0.45rem;
      font-weight: 700;
      background: url('@{url}sprite.png') no-repeat 0 -.15rem;
      background-size: 100%;
      text-align: center;
      line-height: 1rem;
      a {
        text-decoration: none;
        color: #303d57;
      }
    }
  }

  footer {
    width: 100%;
    height: 2.8rem;
    background: url('@{url}footer.png');
    background-size: 100% auto;
  }
}
